<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" size="large" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" size="large" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <drag-verify
        :width="code.width"
        :height="code.height"
        :text="code.text"
        :circle="code.circle"
        :success-text="code.successText"
        :background="code.background"
        :progress-bar-bg="code.progressBarBg"
        :handler-icon="code.handlerIcon"
        :text-size="code.textSize"
        :success-icon="code.successIcon"
        ref="Verify"
      ></drag-verify>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" :loading="loading" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
import 'font-awesome/css/font-awesome.min.css'
import dragVerify from 'vue-drag-verify'
export default {
  name: 'LoginForm',
  components: {
    dragVerify
  },
  props: {
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      code: {
        handlerIcon: "fa fa-angle-double-right",
        successIcon: "fa fa-check",
        background: "#cccccc",
        progressBarBg: "#4b0",
        handlerBg: "#fff",
        text: "请将滑块拖动到右侧",
        successText: "验证成功",
        circle: true,
        height: 35,
        width: 268,
        textSize: "13px"
      },
      form: {
        userName: 'admin',
        password: '',
        code: false
      }
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules,
        code: this.codeRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        let isPassing = this.$refs.Verify.isPassing
        if (valid) {
          if (isPassing) {
            let { userName, password } = this.form
            this.$emit('on-form-valid', {
              userName,
              password
            })
          } else {
            this.$Message.error('请将滑块拖动到右侧')
          }
        }
      })
    }
  }
}
</script>
